<template>
  <PlayGround v-if="$store.state.pk.status === 'playing'"> </PlayGround>
  <MatchGround v-if="$store.state.pk.status === 'matching'"> </MatchGround>
  <GameModes v-if="$store.state.pk.status === 'loading'"></GameModes>
  <ResultBoard v-if="$store.state.pk.Loser !== 'none'"></ResultBoard>
</template>

<script>
import PlayGround from "@/components/PlayGround.vue";
import { onMounted, onUnmounted } from "vue";
import { useStore } from "vuex";
import MatchGround from "@/components/MatchGround.vue";
import ResultBoard from "@/components/ResultBoard.vue";
import GameModes from "@/components/GameModes.vue";

export default {
  components: {
    GameModes,
    PlayGround,
    MatchGround,
    ResultBoard,
  },

  setup() {
    console.log("pk页面");
    const store = useStore();
    // const socketUrl = `ws://10.70.128.53:7090/ws?token=${store.state.user.token}`;

    store.commit("updateLoser", "none");
    store.commit("updateIsRecord", false);

    // let socket = null;
    onMounted(() => {
      if(store.state.pk.opponentUsername === "")
      store.commit("updateOpponent", {
        username: "我的对手",
        photo: "https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png",
        id:-2,
      });

      store.dispatch("websocket/connect", {//随便调用，因为如果已经连接上了，那么会直接return
        token:store.state.user.token,
        store:store,
      });


      //websocket改到websocket.js里了


      // socket = new WebSocket(socketUrl);

      // socket.onopen = () => {
      //   //打开时
      //   store.commit("updateSocket", socket);
      //   console.log("connected!");
      // };

      // socket.onmessage = (msg) => {
      //   //获得信息
      //   const data = JSON.parse(msg.data);

      //   if (data.event === "start-matching") {
      //     //匹配成功
      //     store.commit("updateOpponent", {
      //       username: data.opponentUsername,
      //       photo: data.opponentPhoto,
      //     });
      //     store.commit("updateGame", data.game);
      //     store.commit("updateBotId", data.bot_id);
      //     store.commit("updateIsMe", true); ///记得修改
      //     store.commit("updateWhatIsMe", "black"); //记得修改

      //     setTimeout(() => {
      //       store.commit("updateStatus", "playing");
      //     }, 2000);
      //   } else if (data.event === "add_point") {
      //     const game = store.state.pk.gameObject;
      //     const [snake0, snake1] = game.Snake;
      //     if (data.a_direction !== undefined) {
      //       if (data.a_id == store.state.user.userId) {
      //         snake0.set_step(data.a_direction);
      //         snake0.update_move_change();
      //       } else {
      //         snake1.set_step(data.a_direction);
      //         snake1.update_move_change();
      //       }
      //     }
      //     if (data.b_direction !== undefined) {
      //       if (data.b_id == store.state.user.userId) {
      //         snake0.set_step(data.b_direction);
      //         snake0.update_move_change();
      //       } else {
      //         snake1.set_step(data.b_direction);
      //         snake1.update_move_change();
      //       }
      //     }
      //   } else if (data.event === "food") {
      //     if (store.state.user.userId == store.state.pk.a_id)
      //       store.state.pk.gameObject.add_food(data.r, data.c);
      //     else
      //       store.state.pk.gameObject.add_food(
      //         store.state.pk.gameObject.rows - 1 - data.r,
      //         store.state.pk.gameObject.cols - 1 - data.c
      //       );
      //   } else if (data.event === "over") {
      //     store.state.pk.gameObject.game_over(data.userId);
      //   }
      // };
      // socket.onclose = () => {
      //   console.log("disconnected!");
      // };
    });

    onUnmounted(() => {
      // socket.close();
      // store.commit("updateStatus", "matching");
    });
  },
};
</script>

<style scoped></style>
